<template>
	<view class="addNewAddress">
		<view class="box disFlex scale-1px-bottom">
			<view class="name">姓名</view>
			<input type="text" value="" v-model.trim="data.name" placeholder="请输入收货人姓名"/>
		</view>
		<view class="box disFlex scale-1px-bottom">
			<view class="name">手机号</view>
			<input type="number" v-model.trim="data.phone" value="" placeholder="请输入手机号码"/>
		</view>
		<view class="box disFlex scale-1px-bottom" @click="addressShow = true">
			<view class="word">省市地区</view>
			<input class="next cityel" type="text" value="" disabled v-model="proandcity" placeholder="点击选择" />
			<pickerAddress v-model="addressShow"  @confirm="addresspick"/>
		</view>
		<view class="box disFlex scale-1px-bottom " style="align-items: flex-start;">
			<view class="name ">详细地址</view>
			<textarea  value="" v-model.trim="data.address" placeholder="请输入详细地址（5-120个字）" maxlength="120" />
		</view>
		<view class="box disFlex scale-1px-bottom " style="align-items: flex-start;">
			<view class="name ">设为默认地址</view>
			<switch :checked="data.is_default" @change="change" color="#2291FF"/>
		</view>
		
		<view class="bottom">
			<button @tap="showPop">删除该地址</button>
			<button :disabled="disabled" @tap="submit">保存</button>
		</view>
		
		<view class="canselBox" v-if="deletePop">
			<view class="cBox">
				<view class="title">确定要删除该地址吗？</view>
				<view class="crt">
					<view @tap="closeDeletePop()">取消</view>
					<view @tap="deleteOne()">确定</view>
				</view>
			</view>
		</view>
		
		<view class="bgs" v-if="isshow">
			<view class="sexPop">
				<view class="disFlex title">
					<text class="cansel" @tap="closeDatePop()">取消</text>
					<text class="word">选择地址</text>
					<text class="sure" @tap="getDate()">确定</text>
				</view>
				<view class="citylist">
					<view @click="changesure(item.shortname,item.id,i)" v-for="(item,i) in citydata" :key="i" :class="i == activeIndex?'cityitem cityactive':'cityitem'">
						{{item.shortname}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		components: {
		    pickerAddress
		},
		data() {
			return {
				activeIndex:-1,
				deletePop:false,
				isshow:false,
				city:'',
				citydata:[],
				id:'',
				data:{
					name:'',
					phone:'',
					city_id:'',
					address:'',
					is_default:'',
				},
				proandcity:'',
				addressShow: false,
				form: '',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.query();
		},
		methods: {
			addresspick(data) {
							console.log(data)
			                this.form={
			                	province: data.province,
			                	city: data.city,
			                	area: data.area,
			                }
							 this.proandcity=`${data.province.shortname} ${data.city.shortname} ${data.area.shortname}`
							 this.data.city_id=data.area.id
			            },  
			query () {
				this.http('/api/address/read','post',{id:this.id}).then( res => {
					console.log(res)
					if(res.sta==200){
						this.data=res.data
						this.proandcity=this.data.city.merger_name
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				
			},
			change(e){
				if(e.detail.value){
					this.data.is_default=1
				}else{
					this.data.is_default=0
				}
			},
			submit () {
				console.log(this.data)
				delete this.data.type 
				delete this.data.update_time 
				delete this.data.create_time 
				delete this.data.fullname 
				delete this.data.city 
				this.http('/api/address/save','post',this.data).then( res => {
					if (res.sta == 200) {
						uni.navigateBack();
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			showPop(){
				this.deletePop=true
			},
			closeDeletePop(){
				this.deletePop=false
			},
			deleteOne(){
				this.deletePop=false
				this.http('/api/address/delete','post',{id:this.id}).then( res => {
					if (res.sta == 200) {
						uni.navigateBack();
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.bgs {
		background: rgba(0, 0, 0, .3);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	
		.sexPop {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			height: 424rpx;
			padding: 0 32rpx;
			background-color: #fff;
	
			.psex {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #999;
				justify-content: center;
			}
	
			.activeColor {
				color: #6894B9;
			}
	
			.title {
				padding: 24rpx 0;
	
				text {
					font-size: 36rpx;
				}
	
				.cansel {
					color: rgba(153, 153, 153, 1);
				}
	
				.word {
					font-weight: bold;
				}
	
				.sure {
					color: #6894B9;
				}
			}
	
			.timeBox {
				padding: 32rpx 0;
	
				.left {
					color: #333;
					font-size: 32rpx;
				}
	
				.right {
					.time {
						color: #333;
						font-size: 32rpx;
					}
	
					.iconfont {
						font-weight: bold;
						margin-left: 10rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.citylist {
		display: flex;
		flex-wrap: wrap;
	
		.cityitem {
			width: 100rpx;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			background-color: #f1f1f1;
			border-radius: 10px;
			color: #666;
			text-align: center;
			margin: 8rpx;
		}
	
		.cityactive {
			background-color: #2291FF !important;
			color: #fff;
		}
	}
	.addNewAddress{
		padding: 0 32rpx;
		
		.box{
			padding: 32rpx 0 ;
			.name{
				width: 208rpx;
				color: #333;
				font-size: 32rpx;
			}
			input{
				flex: 1;
				padding-right: 40rpx;
			}
			.cityel{
				margin-left: 100rpx;
			}
			textarea{
				flex: 1;
				height: 100rpx;
				padding-top: 5rpx;
			}
		}
		
		
		.canselBox{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 999;
			background:rgba(0,0,0,.3);
			.cBox{
				height:300rpx;
				background:rgba(255,255,255,1);
				box-shadow:0px 0px 10px rgba(0,0,0,0.16);
				border-radius:10px;
				position: absolute;
				left: 40rpx;
				width: calc(100% - 80rpx);
				z-index: 9999;
				top: 50%;
				transform: translateY(-50%);
				.title{
					height: 200rpx;
					text-align: center;
					line-height: 200rpx;
					font-size:32rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
				.crt{
					display: flex;
					align-items: center;
					height: 100rpx;
					border-top: 1px solid #eee;
					>view{
						font-size: 36rpx;
						flex: 1;
						text-align: center;
						line-height: 100rpx;
						&:first-child{
							border-right: 1px solid #eee;
						}
						&:last-child{
							color:#2291FF;
						}
					}
				}
			}
		}
		
		
		.bottom{
			position: fixed;
			width: 100%;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow:0px -3px 6px rgba(104,148,185,0.2);
			padding: 0 32rpx;
			button{
				flex: 1;
				font-size:36rpx;
				height:88rpx;
				line-height: 88rpx;
				&:first-child{
					background:rgba(34,145,255,.1) !important;
					color: #2291FF;
				}
				&:last-child{
					margin-left: 20rpx;
					background: #2291FF !important;
					color: #fff;
				}
			}
		}
	}
</style>

